<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!--  -->

      <div id="main" style="width:900px;height:300px"></div>
    </el-card>
  </div>
</template>
<script>
import echarts from "echarts";

export default {
  data() {
    return {};
  },
  created() {},
  async mounted() {
    // 页面渲染完毕后触发


    this.initEcharts()
  },
  methods: {
    async initEcharts() {
      var myChart = echarts.init(document.getElementById('main'));

      const { data: res } = await this.$http.get(`reports/type/1`);
      console.log(res);
      res.data.tooltip={
          trigger:'axis',
           axisPointer:{
               type:'cross',
               label:{
                   backgroundColor:"#E9EEF3"
               }
           }
      }
    //   if (res.meta.status !== 200) return this.$message.error("获取失败");
       res.data.xAxis[0].boundaryGap=false
    //    设置数据绘制图表 
      myChart.setOption(res.data);
    }
  }
};
</script>
<style scoped lang="less">
</style>